<template>
    <div>
        <h1>学了git</h1>
        <h1>会员增加</h1>
        {{ info }}
        <table class="table table-bordered">
            <tbody>
                <tr>
                <td align="right">会员编号</td>
                <td><input type="text" v-model="info.memberCode" disabled></td>
            </tr>
             <tr>
                <td align="right">手机号</td>
                <td><input type="text" v-model="info.tel" maxlength="11"></td>
            </tr>
             <tr>
                <td align="right">姓名</td>
                <td><input type="text" v-model="info.userName"></td>
            </tr>
            <tr>
                <td align="right">证件类型</td>
                <td><select v-model="info.cardType">
                    <option value="">请选择</option>
                    <option :value="item" v-for="item in arr">{{item}}</option>
                </select></td>
            </tr>
             <tr>
                <td align="right">身份证号码</td>
                <td><input type="text" v-model="info.card" maxlength="18"></td>
            </tr>
             <tr>
                <td align="right">会员等级</td>
                <td><select v-model="info.leaveId">
                    <option value="">请选择</option>
                    <option :value="item.memberId" v-for="item in levelList">{{item.memberName}}</option>
                </select></td>
            </tr>
             <tr>
                <td align="right">会员生日</td>
                <td><input type="date" v-model="info.birthday"></td>
            </tr>
            <tr>
                <td align="right">会员积分</td>
                <td><input type="text" v-model="info.score"></td>
            </tr>
            <tr>
                <td align="right">会员余额</td>
                <td><input type="text" v-model="info.money"></td>
            </tr>
             <tr>
                <td align="right">会员性别</td>
                <td><input type="radio" name="gender" :value="1" v-model="info.gender">男
                <input type="radio" name="gender" :value="0" v-model="info.gender">女</td>
            </tr>
             <tr>
                <td align="right">会员爱好</td>
                <td>
                <input type="checkbox" name="likes" value="吃" v-model="info.likes">吃
                <input type="checkbox" name="likes" value="喝" v-model="info.likes">喝
                <input type="checkbox" name="likes" value="玩" v-model="info.likes">玩
                <input type="checkbox" name="likes" value="乐" v-model="info.likes">乐
    </td>
            </tr>
             <tr>
                <td align="right">会员简介</td>
                <td><textarea rows="5" cols="50" v-model="info.desc"/></td>
            </tr>
            <tr>
                <td align="right">是否同意条款</td>
                <td><input type="checkbox" v-model="info.isAgree">XXX条款</td>
            </tr>
             <tr>
                <td align="right"></td>
                <td><input type="button" value="确定" class="btn btn-success"@click="ok" ></td>
            </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from "vue";
import axios from "axios";
import moment from "moment";
import {useRouter} from 'vue-router'
import router from "@/router";
//声明一个变量获取所需要的数据
let info:any =reactive({

  "memberCode": moment(new Date()).format('YYYYMMDD')+Math.random().toString().substring(2,5),
  "tel": "",
  "userName": "",
  "card": "",
  "birthday": "",
  "score": "",
  "money": "",
  "leaveId": "",
  "gender": 1,
  "likes": [],
  "desc": "",
  "isAgree": "",
  "cardType": ""
})
let arr:any=ref(["身份证","驾驶证","军人证","护照"])
//获取会员等级
//onMounted 相当于文档就绪 生命周期函数(12个)
onMounted(()=>
{
    //发送网络请求获取等级列表
    getLeavelList();
})
let levelList:any=ref([]);
//获取等级列表
const getLeavelList=()=>{
    axios({
        url:'/api/Member/GetMemberList',
        method:'get',
    })
    .then((res)=>
    {
        console.log(res);
        levelList.value=res.data;
    })
    .catch((err)=>
    {
        
        console.log(err);
    })

};
const ok=()=>
{
    //1.有效性判断
    if(info.tel=="")
    {
        alert('手机号不能为空');
        return;
    }
    let reg=/^1[3-9]\d{9}$/;
    if(reg.test(info.tel)==false)
    {
        alert('手机号格式不正确');
        return;
    }
    if(info.userName=="")
    {
        alert('姓名不能为空');
        return;
    }
    if(info.card=="")
    {
        alert('身份证号码不能为空');
        return;
    }
    let reg1=/^\d{17}[0-9xX]$/;
    if(reg1.test(info.card)==false)
    {
        alert('身份证号码格式不正确');
        return;
    }
     if(info.birthday=="")
    {
        alert('生日不能为空');
        return;
    }
     if(info.score=="")
    {
        alert('积分不能为空');
        return;
    }
    let reg2=/^[+]?\d+$/;
    if(reg2.test(info.score)==false)
    {
        alert('积分只能是正数');
        return;
    }
    if(info.money=="")
    {
        alert('余额不能为空');
        return;
    }
    if(reg2.test(info.money)==false)
    {
        alert('余额只能是正数');
        return;
    }
     if(info.leaveId=="")
    {
        alert('会员等级必选');
        return;
    }
     if(info.likes.length==0)
    {
        alert('爱好必选');
        return;
    }
    if(info.desc=="")
    {
        alert('简介不能为空');
        return;
    }
    let reg3=/^[\u4e00-\u9fa5]{1,50}$/;
    if(reg3.test(info.desc)==false)
    {
        alert('只能是50以内的汉字');
        return;
    }
    if(info.isAgree==false)
    {
        alert('同意条款必选');
        return;
    }
    //2.做增加操作
    info.likes = info.likes.toString()
    axios({
        url:'/api/Member/AddMerber',
        method:'post',
        data:info
    })
    .then((res)=>
{
    console.log(res);
    if(res.data>0)
    {
        alert("增加成功");
        //跳转到会员列表
        router.push("/memberList")
        return;
    }
    if(res.data==-1)
    {
        alert("手机号重复");
        return;
    }
    else
    {
        alert("增加失败");
        return;
    }
    
})
.catch((err)=>
{
    
    console.log(err);
})
};
</script>

<style scoped>

</style>